<template>
  <div class="login-container">
    <div class="floating-squares">
      <div class="glass-panel" style="--i:1; --width:150px; --height:140px; --x:62%; --y:20%; --z:-5;"></div>
      <div class="glass-panel" style="--i:2; --width:80px; --height:80px; --x:30%; --y:60%; --z:25;"></div>
      <div class="glass-panel" style="--i:3; --width:220px; --height:250px; --x:55%; --y:65%; --z:-5;"></div>
      <div class="glass-panel" style="--i:4; --width:200px; --height:200px; --x:30%; --y:5%; --z:10;"></div>
      <!-- <div class="glass-panel circle" style="--i:5; --width:200px; --height:200px; --x:25%; --y:70%; --z:25;"></div> -->
      <!-- <div class="glass-panel" style="--i:6; --width:260px; --height:200px; --x:70%; --y:75%; --z:-5;"></div> -->
      <div class="floating-square" style="--i:1; --size:80px; --x:15%; --y:35%;" @click="createRipple">
        <span class="ripple"></span>
      </div>
      <div class="floating-square" style="--i:3; --size:90px; --x:85%; --y:40%;" @click="createRipple">
        <span class="ripple"></span>
      </div>
      <div class="floating-square" style="--i:5; --size:70px; --x:10%; --y:70%;" @click="createRipple">
        <span class="ripple"></span>
      </div>
      <div class="floating-square" style="--i:7; --size:85px; --x:80%; --y:20%;" @click="createRipple">
        <span class="ripple"></span>
      </div>
    </div>
    <div class="flip-container" :class="{ 'flipped': isFlipped }">
      <div class="flipper">
        <div class="front">
          <div class="login-box" ref="loginBox">
      <div class="login-header">
        <h2>实验室签到系统</h2>
        <p class="subtitle">欢迎使用签到系统</p>
      </div>
      <form @submit.prevent="handleLogin">
        <div class="login-input-group">
          <div class="login-input-wrapper">
            <i class="icon-user"></i>
            <input 
              type="text" 
              v-model="loginForm.username" 
              @blur="validateUsername"
              :class="{ 'login-error': errors.username }"
              placeholder="请输入学号" 
              required
            >
          </div>
          <span class="login-error-message" v-if="errors.username">{{ errors.username }}</span>
        </div>
        <div class="login-input-group">
          <div class="login-input-wrapper">
            <i class="icon-lock"></i>
            <input 
              type="password" 
              v-model="loginForm.password" 
              @blur="validatePassword"
              :class="{ 'login-error': errors.password }"
              placeholder="请输入密码" 
              required
            >
          </div>
          <span class="login-error-message" v-if="errors.password">{{ errors.password }}</span>
        </div>
        <button type="submit" class="login-btn" >
          <span>登 录</span>
          <i class="icon-arrow"></i>
        </button>
        <div class="login-error-message" v-if="loginError" style="text-align: center; margin-top: 10px; color: #ff4444; font-size: 12px;">
          {{ loginError }}
        </div>
        <div class="switch-form">
          <span @click="isFlipped = true">查看可用账号</span>
        </div>
      </form>
    </div>
  </div>
  <div class="back">
    <div class="login-box register-box">
      <div class="login-header">
        <h2>注册功能已禁用</h2>
        <p class="subtitle">请使用固定账号登录</p>
        <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; margin-top: 15px; border: 1px solid rgba(255, 255, 255, 0.2);">
          <p style="color: #fff; font-size: 14px; margin: 0 0 10px 0; font-weight: 600;">可用账号：</p>
          <p style="color: rgba(255, 255, 255, 0.9); font-size: 12px; margin: 5px 0;">👨‍🎓 学生账号：23062231 / yx@123</p>
          <p style="color: rgba(255, 255, 255, 0.9); font-size: 12px; margin: 5px 0;">👨‍🏫 教师账号：23062000 / teacher123</p>
        </div>
      </div>
      <form @submit.prevent="handleRegister">
        <div style="text-align: center; padding: 20px;">
          <p style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 20px;">
            系统已设置为固定账号登录模式，请使用上述账号进行登录。
          </p>
        </div>
        <button type="submit" class="login-btn">
          <span>返回登录</span>
          <i class="icon-arrow"></i>
        </button>
        <div class="switch-form">
          <span @click="isFlipped = false">返回登录页面</span>
        </div>
      </form>
    </div>
  </div>
</div>
</div>
</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import {loginGo,logout,register,checkEmail} from '@/api/login';
import { useRouter } from 'vue-router';
import { useLoginUserStore } from '@/store/useLoginUserStore';

const isFlipped = ref(false);
const router = useRouter();
const userStore = useLoginUserStore();

const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
  name: '',
  email: '',
  verificationCode: ''
});

const registerErrors = ref({
  username: '',
  password: '',
  confirmPassword: '',
  name: '',
  email: '',
  verificationCode: ''
});

const isGettingCode = ref(false);
const codeButtonText = ref('获取验证码');
const countDown = ref(60);
let timer = null;

function validateRegisterUsername() {
  const usernamePattern = /^\d{8}$/;
  if (!usernamePattern.test(registerForm.value.username)) {
    registerErrors.value.username = '学号必须是8位数字';
    return false;
  }
  registerErrors.value.username = '';
  return true;
}

function validateRegisterPassword() {
  if (!registerForm.value.password.trim()) {
    registerErrors.value.password = '密码不能为空';
    return false;
  }
  if (registerForm.value.password.length < 6) {
    registerErrors.value.password = '密码长度不能少于6位';
    return false;
  }
  registerErrors.value.password = '';
  return true;
}

function validateConfirmPassword() {
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    registerErrors.value.confirmPassword = '两次输入的密码不一致';
    return false;
  }
  registerErrors.value.confirmPassword = '';
  return true;
}

function validateRegisterName() {
  if (!registerForm.value.name.trim()) {
    registerErrors.value.name = '姓名不能为空';
    return false;
  }
  registerErrors.value.name = '';
  return true;
}

function validateRegisterEmail() {
  const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  if (!emailPattern.test(registerForm.value.email)) {
    registerErrors.value.email = '请输入有效的邮箱地址';
    return false;
  }
  registerErrors.value.email = '';
  return true;
}

function validateVerificationCode() {
  if (!registerForm.value.verificationCode.trim()) {
    registerErrors.value.verificationCode = '验证码不能为空';
    return false;
  }
  if (registerForm.value.verificationCode.length !== 6) {
    registerErrors.value.verificationCode = '验证码应为6位数字';
    return false;
  }
  registerErrors.value.verificationCode = '';
  return true;
}

function getVerificationCode() {
  // 禁用验证码功能，因为注册功能已禁用
  alert('注册功能已禁用！\n\n请使用以下固定账号登录：\n学生账号：23062231 / yx@123\n教师账号：23062000 / teacher123');
  return;

  // 注释掉原来的验证码逻辑
  // if (!validateRegisterEmail()) {
  //   return;
  // }
  
  // isGettingCode.value = true;
  // codeButtonText.value = `${countDown.value}秒后重试`;
  
  // // TODO: 发送验证码到邮箱的API调用
  // console.log('发送验证码到邮箱:', registerForm.value.email);
  // checkEmail(registerForm.value.email).then(res=>{
  //   console.log('验证码发送成功');
  // })
  
  // timer = setInterval(() => {
  //   countDown.value--;
  //   codeButtonText.value = `${countDown.value}秒后重试`;
    
  //   if (countDown.value <= 0) {
  //     clearInterval(timer);
  //     isGettingCode.value = false;
  //     codeButtonText.value = '获取验证码';
  //     countDown.value = 60;
  //   }
  // }, 1000);
}

function handleRegister() {
  // 直接返回登录页面
  isFlipped.value = false;
  return;

  // 注释掉原来的验证逻辑
  // const isUsernameValid = validateRegisterUsername();
  // const isPasswordValid = validateRegisterPassword();
  // const isConfirmPasswordValid = validateConfirmPassword();
  // const isNameValid = validateRegisterName();
  // const isEmailValid = validateRegisterEmail();
  // const isVerificationCodeValid = validateVerificationCode();

  // if (!isUsernameValid || !isPasswordValid || !isConfirmPasswordValid || 
  //     !isNameValid || !isEmailValid || !isVerificationCodeValid) {
  //   return;
  // }

  // // 禁用注册功能，只允许使用固定账号
  // alert('注册功能已禁用！\n\n请使用以下固定账号登录：\n学生账号：23062231 / yx@123\n教师账号：23062000 / teacher123');
  // return;

  // // 注释掉原来的注册逻辑
  // // const dataRegister = {
  // //   userid: registerForm.value.username,
  // //   password: registerForm.value.password,
  // //   name: registerForm.value.name,
  // //   email: registerForm.value.email,
  // //   verifyCode: registerForm.value.verificationCode,
  // //   grade:registerForm.value.username.slice(0, 2) + '级',
  // // }
  // // register(dataRegister).then(res=>{
  // //   console.log('注册成功');
  // // }).errors(err=>{
  // //   console.log('注册失败');
  // // })
  // // console.log('注册表单提交', registerForm.value);
}

const loginForm = ref({
  username: '',
  password: ''
});

const errors = ref({
  username: '',
  password: ''
});

const loginError = ref('');

const loginBox = ref(null);

function validateUsername() {
  const usernamePattern = /^\d{8}$/;
  if (!usernamePattern.test(loginForm.value.username)) {
    errors.value.username = '学号必须是8位数字';
    return false;
  }
  errors.value.username = '';
  return true;
}

function validatePassword() {
  if (!loginForm.value.password.trim()) {
    errors.value.password = '密码不能为空';
    return false;
  }
  errors.value.password = '';
  return true;
}

function handleLogin() {
  console.log('登录')
  const isUsernameValid = validateUsername();
  const isPasswordValid = validatePassword();

  if (!isUsernameValid || !isPasswordValid) {
    return;
  }

  // 清除之前的错误信息
  loginError.value = '';

  // 固定账号验证
  const validAccounts = [
    { username: '23062231', password: 'yx@123', role: 'student' },
    { username: '23062000', password: 'teacher123', role: 'teacher' }
  ];

  const matchedAccount = validAccounts.find(
    account => account.username === loginForm.value.username && 
               account.password === loginForm.value.password
  );

  if (matchedAccount) {
    console.log('登录成功，角色:', matchedAccount.role);
    // 保存用户信息到store
    userStore.setLoginUser({ 
      userName: matchedAccount.username, 
      role: matchedAccount.role 
    });
    router.push('/home');
  } else {
    // 显示错误信息
    loginError.value = '账号或密码错误！可用账号：学生账号(23062231/yx@123) 教师账号(23062000/teacher123)';
    return;
  }

  // 注释掉原来的API调用
  // const dataLogin = {
  //   username: loginForm.value.username,
  //   password: loginForm.value.password
  // }
  // loginGo(dataLogin).then(res=>{
  //     router.push('/home');
  // }).errors(err=>{
  //   console.log('登录失败');
  // })
  // router.push('/home');
}

// 添加波纹效果函数
function createRipple(event) {
  const ripple = event.currentTarget.querySelector('.ripple');
  ripple.classList.remove('active');
  
  // Trigger reflow
  void ripple.offsetWidth;
  
  ripple.classList.add('active');
}

onMounted(() => {
  // 移除粒子动画初始化
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.flip-container {
  perspective: 1000px;
  width: 380px;
  height: 600px;
  position: relative;
  z-index: 2;
  transform: translateZ(0);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: translateY(-10px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.15);
  }
  100% {
    transform: translateY(0px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  }
}

.flip-container.flipped .flipper {
  transform: rotateY(180deg);
}

.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
  width: 100%;
  height: 100%;
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front {
  z-index: 2;
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(180deg);
}

.login-box {
  position: relative;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  padding: 40px;
  border-radius: 20px;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s ease;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden;
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.3)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
             linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.login-box::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
  transform: rotate(30deg);
  pointer-events: none;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.login-header h2 {
  color: #fff;
  font-size: 28px;
  margin-bottom: 8px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

/* 登录表单样式 */
.login-input-group {
  position: relative;
  margin-bottom: 20px;
}

.login-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-wrapper i {
  position: absolute;
  left: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
}

.icon-user::before {
  content: "👤";
}

.icon-lock::before {
  content: "🔒";
}

.icon-arrow::before {
  content: "→";
  margin-left: 8px;
}

.login-input-group input,
.register-input-group input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
}

.login-input-group input:focus,
.register-input-group input:focus {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.login-input-group input.login-error,
.register-input-group input.register-error {
  border-color: rgba(255, 68, 68, 0.5);
  background: rgba(255, 68, 68, 0.05);
}

.login-input-group input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.login-error-message {
  position: absolute;
  left: 0;
  bottom: -18px;
  color: #ff4444;
  font-size: 12px;
  opacity: 0.8;
}

.login-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(255, 255, 255, 0.3), 
    rgba(255, 255, 255, 0.1), 
    rgba(255, 255, 255, 0.3));
  border-radius: 10px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.3) 100%);
}

.login-btn:hover::before {
  opacity: 1;
  animation: pulse 1.5s infinite;
}

.login-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(53, 122, 189, 0.3);
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 0.5; }
}

.login-btn .icon-arrow {
  transition: transform 0.3s ease;
  margin-left: 8px;
}

.login-btn:hover .icon-arrow {
  transform: translateX(5px);
}

.switch-form {
  margin-top: 20px;
  text-align: center;
}

.switch-form span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.switch-form span:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* 注册表单样式 */
.register-input-group {
  position: relative;
  margin-bottom: 25px;
}

.register-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.register-input-wrapper i {
  position: absolute;
  left: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
}

.register-input-group input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.register-error-message {
  position: absolute;
  left: 0;
  bottom: -18px;
  color: #ff4444;
  font-size: 11px;
  opacity: 0.8;
}

/* 删除原来的通用样式 */
.input-group,
.input-wrapper,
.error-message,
.input-group input,
.input-group input:focus,
.input-group input.error,
.input-group input::placeholder {
  /* 这些样式已被替换为特定的登录和注册样式 */
}

.icon-name::before {
  content: "👤";
}

.icon-email::before {
  content: "✉️";
}

.icon-verify::before {
  content: "🔑";
}

.email-wrapper {
  display: flex;
  align-items: center;
}

.verification-code-btn {
  position: absolute;
  right: 5px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.verification-code-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}

.verification-code-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.register-input-wrapper input[type="email"] {
  padding-right: 110px;
}

/* 调整注册页面的盒子高度和滚动 */
.register-box {
  height: 100%;
  /* overflow-y: auto; */
  padding: 30px;
}

.register-box::-webkit-scrollbar {
  width: 5px;
}

.register-box::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.register-box::-webkit-scrollbar-thumb {
  background: rgba(74, 144, 226, 0.3);
  border-radius: 10px;
}

.register-box::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 144, 226, 0.5);
}

/* 减小注册表单的间距 */
.register-input-group {
  position: relative;
  margin-bottom: 25px;
}

/* 调整注册页面的标题和副标题 */
.register-box .login-header {
  margin-bottom: 25px;
}

.register-box .login-header h2 {
  font-size: 24px;
}

.register-box .subtitle {
  font-size: 13px;
}

/* 调整输入框的内边距 */
.register-input-group input {
  padding: 8px 15px 8px 35px;
}

.register-input-wrapper i {
  left: 10px;
  font-size: 16px;
}

/* 调整验证码按钮 */
.verification-code-btn {
  padding: 4px 8px;
  font-size: 11px;
}

/* 调整注册按钮的内边距 */
.register-box .login-btn {
  padding: 12px;
}

/* 修复浏览器自动填充样式问题 */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.2) inset !important;
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: #fff;
}

/* 针对Firefox和其他浏览器 */
input:autofill,
input:autofill:hover, 
input:autofill:focus,
input:autofill:active {
  box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.2) inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
}

/* 确保自动填充的输入框边框样式保持一致 */
input:-webkit-autofill:focus {
  border-color: rgba(74, 144, 226, 0.5) !important;
}

/* 确保自动填充的错误输入框样式保持一致 */
input.login-error:-webkit-autofill,
input.register-error:-webkit-autofill {
  border-color: rgba(255, 68, 68, 0.5) !important;
}

/* 调整登录页面布局使表单居中 */
.login-box {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  padding: 40px;
  border-radius: 20px;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s ease;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 调整登录表单内部元素 */
.login-box form {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* 确保注册页面的表单也居中 */
.register-box form {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.register-box .login-header {
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* 悬浮磨砂方块样式 */
.floating-squares {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.floating-square {
  position: absolute;
  width: var(--size);
  height: var(--size);
  top: var(--y);
  left: var(--x);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: floatSquare 8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1s);
  transform-origin: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
  cursor: pointer;
  overflow: hidden;
}

.floating-square:nth-child(even) {
  animation-duration: 9s;
}

.floating-square:nth-child(3n) {
  animation-duration: 10s;
}

.floating-square:nth-child(3n+1) {
  border-radius: 50%;
}

.floating-square:nth-child(4n) {
  animation-name: floatSquareAlt;
}

.floating-square:nth-child(5n) {
  animation-name: floatSquareRotate;
}

.floating-square::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.floating-square::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    rgba(238, 119, 82, 0.5), 
    rgba(231, 60, 126, 0.5), 
    rgba(35, 166, 213, 0.5), 
    rgba(35, 213, 171, 0.5)
  );
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 添加闪光效果 */
.floating-square:hover {
  transform: scale(1.15) rotate(10deg) translateZ(20px);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.floating-square:hover::before {
  opacity: 1;
  animation: shimmer 2s infinite;
}

.floating-square:hover::after {
  opacity: 1;
  animation: rotateBorder 2s linear infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

.floating-square:active {
  transform: scale(0.95) rotate(-5deg);
  transition: transform 0.1s;
}

@keyframes rotateBorder {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes floatSquare {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(15px) rotate(-5deg);
  }
}

@keyframes floatSquareAlt {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(15px) rotate(-5deg);
  }
  50% {
    transform: translateX(0) rotate(0deg);
  }
  75% {
    transform: translateX(-15px) rotate(5deg);
  }
}

@keyframes floatSquareRotate {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(-10px) rotate(10deg) scale(1.05);
  }
  66% {
    transform: translateY(10px) rotate(-10deg) scale(0.95);
  }
}

/* 确保登录框在悬浮方块上方 */
.flip-container {
  z-index: 10;
}

/* 波纹效果 */
.ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.ripple.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 0.8s ease-out;
  z-index: 2;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

/* 删除冲突的波纹样式 */
.floating-square:active::after {
  display: none;
}

/* 增加大的磨砂玻璃面板样式 */
.glass-panel {
  position: absolute;
  width: var(--width);
  height: var(--height);
  top: var(--y);
  left: var(--x);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: floatPanel 15s ease-in-out infinite;
  animation-delay: calc(var(--i) * -2s);
  transform-origin: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: var(--z);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  cursor: pointer;
}

.glass-panel:hover {
  transform: scale(1.05) translateZ(10px);
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.glass-panel:nth-child(odd):hover {
  transform: scale(1.05) rotate(2deg) translateZ(10px);
}

.glass-panel:nth-child(even):hover {
  transform: scale(1.05) rotate(-2deg) translateZ(10px);
}

.glass-panel.circle:hover {
  transform: scale(1.05) translateZ(10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 0 30px rgba(255, 255, 255, 0.3);
}

/* 添加光泽效果 */
.glass-panel::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  transition: transform 0.5s ease-out;
  border-radius: inherit;
}

.glass-panel:hover::before {
  transform: rotate(30deg) translate(30px, 30px);
}

/* 改进边框效果 */
.glass-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.4) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, 
               linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  transition: opacity 0.5s ease;
}

.glass-panel:hover::after {
  opacity: 1;
}

@keyframes floatPanel {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
    animation-timing-function: ease-in-out;
  }
  25% {
    transform: translateY(-15px) rotate(0.7deg) scale(1.01);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: translateY(3px) rotate(0deg) scale(1);
    animation-timing-function: ease-in-out;
  }
  75% {
    transform: translateY(10px) rotate(-0.7deg) scale(0.99);
    animation-timing-function: ease-in-out;
  }
}

/* 确保登录框在玻璃面板上方 */
.flip-container {
  z-index: 20;
}

.glass-panel.circle {
  border-radius: 50%;
}

/* 添加一些装饰性的内部元素 */
.glass-panel:nth-child(1)::before {
  background: linear-gradient(
    45deg,
    rgba(238, 119, 82, 0.1) 0%,
    rgba(231, 60, 126, 0.05) 50%,
    rgba(35, 213, 171, 0) 100%
  );
}

.glass-panel:nth-child(2)::before {
  background: linear-gradient(
    45deg,
    rgba(35, 166, 213, 0.1) 0%,
    rgba(35, 213, 171, 0.05) 50%, 
    rgba(238, 119, 82, 0) 100%
  );
}

.glass-panel:nth-child(3)::before {
  background: linear-gradient(
    45deg,
    rgba(231, 60, 126, 0.1) 0%,
    rgba(238, 119, 82, 0.05) 50%, 
    rgba(35, 166, 213, 0) 100%
  );
}

/* 增强动画效果 */
@keyframes floatPanel {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
    animation-timing-function: ease-in-out;
  }
  25% {
    transform: translateY(-15px) rotate(0.7deg) scale(1.01);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: translateY(3px) rotate(0deg) scale(1);
    animation-timing-function: ease-in-out;
  }
  75% {
    transform: translateY(10px) rotate(-0.7deg) scale(0.99);
    animation-timing-function: ease-in-out;
  }
}

/* 优化浮动方块与大面板的视觉平衡 */
.floating-square {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
</style>